<!-- eslint-disable vue/no-mutating-props -->
<template>
    <div ref="RefCard" :class="mini ? 'mini form-card' : 'border form-card'">
        <h4>{{ title }}</h4>
        <slot name="top"></slot>
        <div style="height:12px;" v-if="title"></div>
        <ElForm :inline="true" :model="data" :label-width="label_width" :rules="rules">
            <template v-for="item in labels" :key="item.prop">
                <Form :prop="item[0]" :label="item[1]" :data="data" :offsetWidth="offsetWidth"></Form>
            </template>
            <ElFormItem v-if="labels.size === 1">
                <ElInput :display="true" style="opacity: 0;height: 0;"></ElInput>
            </ElFormItem>
        </ElForm>
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import type { interForm } from "@b/model/base/type";
import Form from "./__form.vue";
import { ElInput, ElForm, ElFormItem } from "element-plus";
import { ref, onMounted } from "vue";

interface prop {
    mini?: boolean,
    cover?: string, rules?: any, label_width?: string, labels: Map<string, interForm>, data: any, title?: string
}
const offsetWidth = ref()
const RefCard = ref()
withDefaults(defineProps<prop>(), { cover: '33%' })
onMounted(() => {
    offsetWidth.value = RefCard.value.offsetWidth
})
</script>

<style scoped>
.form-card {
    position: relative;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

.border {
    margin: 10px;
    padding: 10px;
}

.mini .el-form-item {
    width: v-bind(cover);
    margin-right: 0;
}

.form-card+.form-card {
    border-radius: 12px;
}

.el-form-item {
    width: calc(v-bind(cover) - 32px);
    min-width: 140px;
}
</style>